import LoginOtpPage, { LoginOtpCodePage } from "./LoginOtpPages"
import LoginPasswordPage from "./LoginPasswordPages"
import styled from "@emotion/styled"
import { useMemo } from "react"
import { useLoginAction } from "@/features/useSearchAction"
import { createLogger } from "@/utils/logger"

const logger = createLogger("LoginPageV2")

const RootLayout = styled.div`
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    background-color: red;
    border-radius: 8rem 8rem 0 0;
`

export default function LoginPageV2() {
    const { step } = useLoginAction()
    const currentPage = useMemo(() => {
        switch (step) {
            case "login-otp-2":
                return <LoginOtpCodePage />
            case "login-password":
                return <LoginPasswordPage />
            case "login-otp-1":
            default:
                return <LoginOtpPage />
        }
    }, [step])
    return <RootLayout>{currentPage}</RootLayout>
}

export { LoginOtpPage, LoginPasswordPage, LoginOtpCodePage }
